<template>
	<view>
		<view class="goBack">
			<text class="gobackText" @click="goBack">
				<uni-icons type="left" size="18" color="#3E89FA"></uni-icons>
				返回
			</text>
		</view>
		<rich-text :nodes="detail"></rich-text>
	</view>
</template>

<script>
	import {
		get
	} from '@/lib/http.js';
	import categoryVue from '../category/category.vue';

	export default {
		data() {
			return {
				id: null,
				detail: [],
			};
		},
		onLoad(options) {
			// 获取传递过来的 id
			this.id = options.id;
			console.log('接收到的 id:', this.id);
			// 页面加载时获取商品详情数据
			this.fetchGoodsDetail();
		},
		methods: {
			goBack() {
				uni.navigateBack({
					// 返回层级  如果层级没有那么多就直接跳到首页
					delta: 1
				});
			},
			// 定义 handleRequestError 方法
			handleRequestError(error, message) {
				console.error(message, error);
				uni.showToast({
					title: message,
					icon: 'none'
				});
			},
			fetchGoodsDetail() {
				if (!this.id) {
					this.handleRequestError('未获取到有效的 id', '未获取到有效的 id');
					return;
				}
				// 使用 get 方法发起请求，将 id 作为查询参数传递
				get(`/wx/topic/detail?id=${this.id}`)
					.then((response) => {
						const data = response.data;
						// 检查返回的数据中是否存在 data 字段
						if (data && data.data) {
							// 假设接口返回的数据结构包含 gallery、info、specificationList、attribute、detail 等字段
							this.detail = data.data.topic.content;
							console.log(this.detail, '商品详情数据');
						} else {
							this.handleRequestError('返回的数据格式错误', '数据格式错误');
						}
					})
					.catch((error) => {
						this.handleRequestError(error, '请求失败');
					});
			}
		}
	};
</script>

<style>
	.gobackText {
		color: #3E89FA;
		font-size: 15px;
		display: block;
		padding: 13px;
	}

	img {
		max-width: 100%;
		width: 100% !important;
		height: auto !important;
		/* 修改为 auto，避免图片变形 */
		display: block;
	}
</style>